{$layout}

<div class="ui menu text blue top-menu">
    <a href="/apps/probes" class="item">已添加探针</a>
    <a href="/apps/square" class="item">探针广场</a>
    <a href="/apps/addProbe" class="item active">制作探针</a>
</div>

<div>
    <p>在这里可以制作自定义的App服务探针，下面表单中标星（*）的为必填项。</p>

    <div class="ui grid one column">
        <div class="column">
            <form class="ui form" data-tea-action="/apps/addProbe">
                <table class="ui table definition">
                    <tr>
                        <td class="title">App名称（服务名称）*</td>
                        <td>
                            <input type="text" name="name" v-model="name" placeholder="比如Redis、Memcached等" maxlength="100"/>
                            <p class="comment">一个简短的服务名称</p>
                        </td>
                    </tr>
                    <tr>
                        <td>启动的命令名 *</td>
                        <td>
                            <input type="text" name="commandName" v-model="commandName" placeholder="" maxlength="100"/>
                            <p class="comment">通常是启动服务的命令的最后一段，比如对于 "/usr/bin/svnserve -d /home/svn"，可以填入 svnserve</p>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <a href="" @click.prevent="showMore()" v-if="!detailVisible">更多信息<i class="ui icon down angle"></i> </a>
                            <a href="" @click.prevent="showMore()" v-if="detailVisible">更多信息<i class="ui icon up angle"></i> </a>
                        </td>
                    </tr>
                    <tr v-if="detailVisible">
                        <td>开发者</td>
                        <td>
                            <input type="text" name="developer" v-model="developer" placeholder="" maxlength="100"/>
                            <p class="comment">开发者公司、团队或者个人名称</p>
                        </td>
                    </tr>
                    <tr v-if="detailVisible">
                        <td>官方网站</td>
                        <td>
                            <input type="text" name="site" v-model="site" placeholder="" value="http://" maxlength="100"/>
                            <p class="comment">服务的官方网站</p>
                        </td>
                    </tr>
                    <tr v-if="detailVisible">
                        <td>官方文档网址</td>
                        <td>
                            <input type="text" name="docSite" v-model="docSite" placeholder="" value="http://" maxlength="100"/>
                            <p class="comment">服务的官方文档网址</p>
                        </td>
                    </tr>
                    <tr v-if="detailVisible">
                        <td>命令行匹配规则</td>
                        <td>
                            <div class="ui fields inline" v-for="(pattern, index) in commandPatterns" :key="index">
                                <div class="ui field">
                                    <input type="text" name="commandPatterns" v-model="commandPatterns[index]" style="width:30em" maxlength="100"/>
                                </div>
                                <div class="ui field">
                                    <a href="" @click.prevent="removePattern(index)"><i class="icon remove"></i></a>
                                </div>
                            </div>
                            <div style="margin-top:0.4em">
                                <button class="ui button" type="button" @click.prevent="addPattern()">+</button>
                            </div>
                            <p class="comment">如果服务启动了多个进程，或者有多个服务有相同的命令文件名的时候，可能会有多个匹配结果，可以使用匹配规则来只匹配我们想要的。</p>
                            <p class="comment" style="padding-top:0">匹配规则中支持正则表达式。</p>
                        </td>
                    </tr>
                    <tr v-if="detailVisible">
                        <td>获取版本号的命令</td>
                        <td>
                            <input type="text" name="commandVersion" v-model="commandVersion" maxlength="100"/>
                            <p class="comment">常见的有 "${commandFile} --version" 和 "${comamndFile} -v"</p>
                            <p class="comment" style="padding-top:0">在其中可以使用${commandFile}表示命令行文件路径，${commandDir} 命令行文件所在目录。</p>
                        </td>
                    </tr>
                </table>

                <button class="ui button primary" type="submit">保存</button> &nbsp;
                <a href="" @click.prevent="test()">试运行</a>
            </form>

            <!-- 试运行结果 -->
            <p v-if="loading">loading ...</p>
            <div v-if="results.length > 0" style="margin-top:1em">
                <p class="comment">成功找到 {{results.length}} 个App</p>
                <table class="ui table" v-for="app in results">
                    <tr>
                        <td class="title">App名称（服务名称）</td>
                        <td>{{app.name}}</td>
                    </tr>
                    <tr>
                        <td>开发者</td>
                        <td>
                            <span v-if="app.developer.length == 0" class="grey">没有设置</span>
                            <span v-if="app.developer.length > 0">{{app.developer}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>官方网站</td>
                        <td>
                            <span v-if="app.site.length == 0" class="grey">没有设置</span>
                            <a :href="app.site" target="_blank" v-if="app.site.length > 0">{{app.site}}</a>
                        </td>
                    </tr>
                    <tr>
                        <td>官方文档网址</td>
                        <td>
                            <span v-if="app.docSite.length == 0" class="grey">没有设置</span>
                            <a :href="app.docSite" target="_blank" v-if="app.docSite.length > 0">{{app.docSite}}</a>
                        </td>
                    </tr>
                    <tr>
                        <td>版本</td>
                        <td>
                            <span v-if="app.version.length == 0" class="grey">-</span>
                            <span v-if="app.version.length > 0">{{app.version}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>命令文件</td>
                        <td>{{app.file}}</td>
                    </tr>
                    <tr>
                        <td>命令目录</td>
                        <td>{{app.dir}}</td>
                    </tr>
                    <tr>
                        <td>进程</td>
                        <td>
                            <div class="ui field line" v-for="process in app.processes">
                                <div class="ui field">
                                    <span title="PID">[{{process.pid}}]</span> {{process.cmdline}}
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>